<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tailwind.min.css">
</head>
<body>
    <a href="#" class="text-sm font-medium bg-purple-600 rounded-full
 py-4 px-11 text-white inline-block border border-solid shadow hover:text-purple-600
 hover:bg-white hover:border-purple-600 transition duration-300">start</a><br>


    <a href="#" class="text-sm font-medium bg-purple-600 rounded-full
  hover:text-purple-600
 hover:bg-white hover:border-purple-600 transition duration-300">end</a>

    <div class="w-40 h-40 transition-all duration-1000  bg-yellow-400 rounded-full hover:bg-red-400 p-16 shadow-md">中国人</div>

    <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
        <div class="flex-shrink-0">
            <img class="h-12 w-12" src="../img/6.jpg" alt="ChitChat Logo">
        </div>
        <div>
            <div class="text-xl font-medium text-black">ChitChat</div>
            <p class="text-gray-500">You have a new message!</p>
        </div>
    </div>
</body>
</html>